<template>
	<view>
		<!-- 联系人信息 -->
		<view class="module-block">
			<view class="module-info">
				<view class="module-title">联系人信息</view>
				<view class="linkman-group">
					<view class="group-item">
						<view class="label">联系人</view>
						<input class="input-text" type="text" name="linkman" v-model="linkInfo.linkman" @input="linkChange" :placeholder="needLinkman ? '必填' : '非必填'" placeholder-class="input-placeholder">
					</view>
					<view class="group-item">
						<view class="label">手机号码</view>
						<input class="input-text" type="number" name="linktel" v-model="linkInfo.linktel" @input="linkChange" :placeholder="needLinkmobile ? '必填' : '非必填'" placeholder-class="input-placeholder">
						<!-- #ifdef MP-TOUTIAO -->
						<button type="default" class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberHandler">使用本机号码</button>
						<!-- #endif -->
					</view>
					<view class="group-item">
						<view class="label">电子邮箱</view>
						<input class="input-text" type="text" name="linkemail" v-model="linkInfo.linkemail" @input="linkChange" :placeholder="needEmail ? '接收确认信息(必填)' : '接收确认信息(非必填)'" placeholder-class="input-placeholder">
					</view>
					<view class="group-item textarea">
						<view class="label">预订备注</view>
						<view v-if="isShow" class="textarea-text textarea-box">
							<view class="scroll-area">
								{{linkInfo.remark ? linkInfo.remark : needRemark ? '备注(必填)' : '备注(非必填)'}}
							</view>
						</view>
						<view class="textarea-wrap" v-else>
							<textarea class="textarea-text" name="remark" auto-height v-model="linkInfo.remark" @input="linkChange" :placeholder="needRemark ? '备注(必填)' : '备注(非必填)'" placeholder-class="input-placeholder"></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	/**
	 * 旅客信息
	 * 
	 */
	export default {
		name: 'stLinkInfo',
		props:{
			linkInfo:{
				type: Object,
				default() {
					return {
						linkman:'',
						linktel:'',
						linkInfo:'',
						remark:''
					}
				}
			},
			remarkStr: {
				type: String,
				default: '备注(非必填)'
			},
			needLinkman: {
				type: Boolean,
				default: true
			},
			needLinkmobile: {
				type: Boolean,
				default: true
			},
			needEmail: {
				type: Boolean,
				default: false
			},
			needRemark: {
				type: Boolean,
				default: false
			},
			isShow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				
			};
		},
		mounted() {
			
		},
		methods: {
			// 联系人输入信息
			linkChange(e){
				this.$emit('linkChange',this.linkInfo);
			},
			
			//使用本机号码
			async getPhoneNumberHandler(e){
				let phone, params, session_key, phoneRes;
				session_key = uni.getStorageSync('session_key');
				params = {
					method: 'api/v2/member_login/get_phone_by_toutiao_program',
					sessionKey: session_key,
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv
				}
				phoneRes = await this.$http(params);
				if(phoneRes.status){
					this.linkInfo.linktel = phoneRes.data.phoneNumber;;
					this.$emit('linkChange',this.linkInfo);
				}else{
					uni.showToast({
						title: phoneRes.msg,
						icon: "none"
					})
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.module-block{
		padding: 0 24rpx;
		margin-bottom: 20rpx;
	}
	.module-info{
		padding: 28rpx 24rpx;
		border-radius: 20rpx;
		background-color: $uni-bg-color;
		margin-bottom: 20rpx;
		.module-title{
			line-height: 1.24;
			font-size: 34rpx;
			font-weight: bold;
		}
		.linkman-group{
			margin-top: 18rpx;
			.group-item{
				@extend .displayflex;
				height: 88rpx;
				font-size: $uni-font-size-base;
				&.textarea{
					height: auto;
				}
				.label{
					width: 210rpx;
					line-height: 88rpx;
				}
				.input-text{
					@extend .flex1;
					width: 450rpx;
					height: 100%;
					font-size: $uni-font-size-base;
				}
				.textarea-text{
					@extend .flex1;
					width: 450rpx;
					font-size: $uni-font-size-base;
					line-height: 36rpx;
					box-sizing: border-box;
				}
				.textarea-box{
					.scroll-area{
						height: 100%;
						overflow-y: auto;
					}
				}
				.textarea-wrap{
					padding: 28rpx 0 12rpx;
				}
				.input-placeholder{
					line-height: 1.571;
					color: $uni-text-color-placeholder;
				}
				.phone-btn{
					line-height: 88rpx;
					background-color: transparent;
					font-size: $uni-font-size-sm;
				}
			}
		}
	}
</style>
